.color-1 {
    color: #ef3630 !important
}

.color-green {
    color: #36a367 !important
}

.color-red {
    color: #ff7777 !important
}

.color-blue {
    color: #2db2ea !important
}

.color-grey {
    color: #d8d8d8 !important
}

.color-darkgrey {
    color: #777 !important
}

.color-white {
    color: #ffffff !important
}

.color-black {
    color: #222 !important
}

.bg-1 {
    background-color: #ef3630 !important
}

.bg-green {
    background-color: #36a367 !important
}

.bg-red {
    background-color: #ff7777 !important
}

.bg-blue {
    background-color: #2db2ea !important
}

.bg-grey {
    background-color: #d8d8d8 !important
}

.bg-darkgrey {
    background-color: #777 !important
}

.bg-white {
    background-color: #ffffff !important
}

.border-1 {
    border-color: #ef3630 !important
}

.border-green {
    border-color: #36a367 !important
}

.border-red {
    border-color: #ff7777 !important
}

.border-blue {
    border-color: #2db2ea !important
}

.border-grey {
    border-color: #d8d8d8 !important
}

.hover-color-1:hover {
    color: #ef3630 !important
}

.hover-color-green:hover {
    color: #36a367 !important
}

.hover-color-red:hover {
    color: #ff7777 !important
}

.hover-color-blue:hover {
    color: #2db2ea !important
}

.hover-color-white:hover {
    color: #ffffff !important
}

.hover-color-black:hover {
    color: #333 !important
}

.hover-color-darkgrey:hover {
    color: #777 !important
}

.hover-bg-1:hover {
    background-color: #ef3630 !important
}

.hover-bg-green:hover {
    background-color: #36a367 !important
}

.hover-bg-red:hover {
    background-color: #ff7777 !important
}

.hover-bg-blue:hover {
    background-color: #2db2ea !important
}

.hover-bg-grey:hover {
    background-color: #d8d8d8 !important
}

.hover-bg-white:hover {
    background-color: #ffffff !important
}

.hover-border-1:hover {
    border-color: #ef3630 !important;
    opacity: 1
}

.hover-border-green:hover {
    border-color: #36a367 !important
}

.hover-border-blue:hover {
    border-color: #2db2ea !important
}

.hover-border-red:hover {
    border-color: #ff7777 !important
}

.hover-border-white:hover {
    border-color: #ffffff !important
}

.align-center {
    text-align: center !important;
}

.align-left {
    text-align: left !important;
}

.align-right {
    text-align: right !important;
}

.left {
    float: left !important;
}

.right {
    float: right !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.post-list a {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

.post-list a:visited {
    color: #777;
}

.sections-title {
    font-size: 34px;
    font-weight: 100;
}

.material-icons {
    font-family: 'Material Icons', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

i.material-icons {
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
}

/*@font-face {*/
    /*font-family: 'icomoon';*/
    /*src: url('xianliaome4.woff') format('woff'),*/
    /*url('xianliaome4.ttf') format('truetype');*/
    /*!*url('//cdn.xianliao.me/assets/xianliaome3.woff') format('woff'),*!*/
    /*!*url('//cdn.xianliao.me/assets/xianliaome3.ttf') format('truetype');*!*/
    /*font-style: normal;*/
/*}*/

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-tag_faces:before {
    content: "\e933";
}

.icon-format_quote:before {
    content: "\e931";
}

.icon-award:before {
    content: "\e900";
}

.icon-bell:before {
    content: "\e901";
}

.icon-check:before {
    content: "\e902";
}

.icon-chevron-left:before {
    content: "\e903";
}

.icon-chevron-right:before {
    content: "\e904";
}

.icon-circle:before {
    content: "\e905";
}

.icon-clipboard:before {
    content: "\e906";
}

.icon-clock:before {
    content: "\e937";
}

.icon-corner-down-left:before {
    content: "\e907";
}

.icon-cpu:before {
    content: "\e908";
}

.icon-dollar-sign:before {
    content: "\e932";
}

.icon-download-cloud:before {
    content: "\e909";
}

.icon-droplet:before {
    content: "\e90a";
}

.icon-edit:before {
    content: "\e935";
}

.icon-feather:before {
    content: "\e934";
}

.icon-flag:before {
    content: "\e90b";
}

.icon-folder:before {
    content: "\e90c";
}

.icon-heart:before {
    content: "\e938";
}

.icon-home:before {
    content: "\e90d";
}

.icon-image:before {
    content: "\e90e";
}

.icon-info:before {
    content: "\e90f";
}

.icon-layers:before {
    content: "\e910";
}

.icon-layout:before {
    content: "\e911";
}

.icon-link-2:before {
    content: "\e912";
}

.icon-lock:before {
    content: "\e913";
}

.icon-maximize-2:before {
    content: "\e914";
}

.icon-menu:before {
    content: "\e915";
}

.icon-message-circle:before {
    content: "\e916";
}

.icon-message-square:before {
    content: "\e917";
}

.icon-minus:before {
    content: "\e918";
}

.icon-minus-circle:before {
    content: "\e919";
}

.icon-more-horizontal:before {
    content: "\e91a";
}

.icon-more-vertical:before {
    content: "\e91b";
}

.icon-navigation:before {
    content: "\e91c";
}

.icon-plus:before {
    content: "\e91d";
}

.icon-plus-circle:before {
    content: "\e91e";
}

.icon-search:before {
    content: "\e91f";
}

.icon-send:before {
    content: "\e920";
}

.icon-settings:before {
    content: "\e921";
}

.icon-share-2:before {
    content: "\e922";
}

.icon-shield:before {
    content: "\e923";
}

.icon-slash:before {
    content: "\e936";
}

.icon-sliders:before {
    content: "\e924";
}

.icon-smartphone:before {
    content: "\e925";
}

.icon-square:before {
    content: "\e926";
}

.icon-star:before {
    content: "\e939";
}

.icon-trash-2:before {
    content: "\e927";
}

.icon-upload-cloud:before {
    content: "\e928";
}

.icon-user:before {
    content: "\e929";
}

.icon-user-check:before {
    content: "\e92a";
}

.icon-user-minus:before {
    content: "\e92b";
}

.icon-user-plus:before {
    content: "\e92c";
}

.icon-user-x:before {
    content: "\e92d";
}

.icon-users:before {
    content: "\e92e";
}

.icon-x:before {
    content: "\e92f";
}

.icon-x-circle:before {
    content: "\e930";
}

body {
    background-color: #eee;
    font-family: "Microsoft Yahei", "Roboto", "Helvetica", "Arial", sans-serif;

}

h1, h2 {
    font-family: "Microsoft Yahei", "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
}

.mdl-button {
    font-family: "Microsoft Yahei", "Roboto", "Helvetica", "Arial", sans-serif;
}

body:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*背景*/
    background-image: url(http://cdn.xianliao.me/images/2c2468269732fbc5d163d0e26dde6b51.jpg);
    background-size: initial;
    z-index: -1;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset;
}

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: white !important;
    background-image: none !important;
    color: #aaa !important;
}

.mdl-layout__header {
    min-height: 40px;
}

.mdl-layout__header-row {
    height: 40px;
    padding: 0 40px 0 40px;
}

@media screen and (max-width: 1024px) {
    .mdl-layout__header {
        display: block;
    }

    .mdl-layout__header-row {
        height: 40px;
        padding: 0 16px 0 16px;
    }

}

form {
    margin: 0;
}

.mdl-card--border {
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.mdl-textfield {
    width: 100%;
}

.post-title {
    margin-bottom: 10px;
    line-height: 1.4;
    font-weight: 400;
    font-size: 24px;
    padding-bottom: 10px;
    adding-right: 120px;
}

.post-title-all {
    margin-top: -15px;
    display: block;
    margin-bottom: 15px;
    font-size: 15px;
    width: 100px;
}

.post-meta {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    margin-bottom: 10px;
    font-size: 16px;
    color: #8b8b8b;
}

.post-meta-avatar {
    width: 30px;
    height: 30px;
    margin-right: 8px;
    display: inline-block;
    background-size: cover;
    background-color: #ccc;
    background-position: 50% 50%;
    border-radius: 100%;
    margin-bottom: -7px;
}

.post-container {
    padding: 15px 7px 15px 7px;
}

.post-container.post-container-settings {
    width: auto;
}

/*搜索框与帖子大小*/
@media screen and (min-width: 1025px) {
    .post-container {
        position: relative;
        margin-left: 5%;
        margin-right: 30%;
        padding: 40px 20px 80px 20px;
    }

    .post-container.post-container-settings {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
}

.post-container img {
    max-width: 100%;
    margin-bottom: 15px;
}

p {
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 16px;
}

.mdl-card {
    width: auto;
    background: white;
    min-height: 0;
}

.mdl-button--large {
    padding: 0 32px;
}

.mdl-shadow--2dp {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.mdl-card__post-list {
    padding: 0 16px 16px 16px;
}

.mdl-card__post-edit {
    padding: 16px;
}

.mdl-card__pagination {
    font-size: 16px;
    line-height: normal;
    width: 100%;
    padding: 16px 10px 0 10px;
    box-sizing: border-box;
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.mdl-card__compose-actions {
    font-size: 16px;
    line-height: normal;
    width: 100%;
    background-color: transparent;
    padding: 8px;
    box-sizing: border-box;
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.mdl-textfield__input {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    display: block;
    font-size: 16px;
    font-family: "Helvetica", "Arial", sans-serif;
    margin: 0;
    padding: 4px 0;
    width: 100%;
    background: 0 0;
    text-align: left;
    color: inherit;
}

.post-title__input {
    font-size: 24px;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, .12);
}

.post-title__input:hover {
    border-color: #999;
    background-color: #f9f9f9;
}

.cke_editor img {
    max-width: 100%;
}

.post-edit-upload-container {
    position: absolute;
    top: 200px;
    left: 200px;
    height: 200px;
    width: 400px;
    background: white;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.post-edit-upload-container-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.post-edit-upload-container .compose-dropzone-bg {
    text-align: center;
    position: absolute;
    left: 3px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 3px;
    right: 3px;
    bottom: 3px;
    border: 1px dashed;
}

.post-edit-upload-container .compose-dropzone {
    width: 100%;
    height: 100%;
    float: left;
    position: relative;
    cursor: pointer;
}

.post-edit-upload-container .btn-close {
    position: absolute;
    right: -12px;
    top: -12px;
}

.post-edit-upload-container-inner:hover i {
    animation: dropzoneiconshake 0.5s linear infinite;
}

@keyframes dropzoneiconshake {
    0% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -5px, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

.compose-dropzone-loading {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.progress {
    position: relative;
    height: 2px;
    display: block;
    width: 100%;
    background-clip: padding-box;
    overflow: hidden;
}

.post-edit-upload-container .progress {
    left: 3px;
    right: 3px;
    bottom: 3px;
    top: 3px;
    position: absolute;
    height: auto;
    width: auto;
    opacity: 0.2;
}

.progress .indeterminate:before {
    content: "";
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

.post-edit-upload-container .progress .indeterminate:before {
    top: auto;
    right: 0;
    -webkit-animation: indeterminate-vertical 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    animation: indeterminate-vertical 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

.progress .indeterminate:after {
    content: "";
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -webkit-animation-delay: 1.15s;
    animation-delay: 1.15s;
}

.post-edit-upload-container .progress .indeterminate:after {
    top: auto;
    right: 0;
    -webkit-animation: indeterminate-vertical-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation: indeterminate-vertical-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -webkit-animation-delay: 1.15s;
    animation-delay: 1.15s;
}

@-webkit-keyframes indeterminate-vertical {
    0% {
        bottom: -35%;
        top: 100%;
    }
    60% {
        bottom: 100%;
        top: -90%;
    }
    100% {
        bottom: 100%;
        top: -90%;
    }
}

@keyframes indeterminate-vertical {
    0% {
        bottom: -35%;
        top: 100%;
    }
    60% {
        bottom: 100%;
        top: -90%;
    }
    100% {
        bottom: 100%;
        top: -90%;
    }
}

@-webkit-keyframes indeterminate-vertical-short {
    0% {
        bottom: -200%;
        top: 100%;
    }
    60% {
        bottom: 107%;
        top: -8%;
    }
    100% {
        bottom: 107%;
        top: -8%;
    }
}

@keyframes indeterminate-vertical-short {
    0% {
        bottom: -200%;
        top: 100%;
    }
    60% {
        bottom: 107%;
        top: -8%;
    }
    100% {
        bottom: 107%;
        top: -8%;
    }
}

.post-list {
    padding: 10px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
}

.post-list:hover {
    background: #f8f8f8;
}

.post-list-cover {
    height: 62px;
    width: 93px;
    margin-right: 10px;
    background-size: cover;
    background-position: 50% 50%;
    flex-shrink: 0;
}

.post-list-cover-dummy {
    height: 62px;
    width: 93px;
    margin-right: 10px;
    background-color: #eee;
}

@media screen and (min-width: 1024px) {
    .post-list-cover:hover {
        transform: scale(3);
        transform-origin: 0 0;
    }
}

.post-list-title {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .04em;
}

.post-list-info {
    font-size: 14px;
    margin-top: 5px;
    font-weight: 400;
    letter-spacing: 0;
    color: rgba(0, 0, 0, .54);
}

.post-list-info span {
    margin-right: 10px;
    cursor: default;
}

.post-list-info span i {
    font-size: 13px;
}

.post__search_container {
    background: white;
    margin: 10px 5px;
    padding: 0px 12px;
    border-radius: 22px;
    position: relative;
}

.post__search_bar {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
}

.post__search_bar .post__search {
    flex: 1;
    background: none;
    -webkit-appearance: none;
    resize: none;
    overflow: hidden;
    border: none;
    padding: 6px;
    line-height: 22px;
    font-size: 14px;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
}

.post__search_container .mdl-button_underscore {
    height: 2px;
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 0px;
    transition: all 250ms ease 0s;
    transform: scale(0);
}

.post__search_container:hover .mdl-button_underscore,
.post__search_container:focus .mdl-button_underscore {
    transform: scale(1);
}

.post__search_submit {
    border: 1px solid;
    border-radius: 20px;
    padding: 5px;
    width: 60px;
    margin-right: -9px;
}

.btn-post-create {
    position: absolute;
    top: 22px;
    right: 15px;
}

.skycitizen-title {

    width: 230px;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
}

.nav_avatar {
    width: 30px;
    height: 30px;
    background-size: cover;
    background-position: 50%;
    border-radius: 100%;
}

.popup-platform-switch {
    position: fixed;
    max-width: 400px;
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background: white;
    z-index: 100;
    animation: popup-platform-in ease 0.6s 1s forwards;
    transform: translate3d(0, -200px, 0);
}

@keyframes popup-platform-in {
    from {
        transform: translate3d(0, -200px, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}